<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">

<title th:text="${session.appname + ' - 登录'}"></title>

<link th:href="@{/favicon.ico}" rel="shortcut icon">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
<link th:href="@{/css/animate.css}" rel="stylesheet">
<link th:href="@{/css/style.css}" rel="stylesheet">

<link th:href="@{/libs/iCheck/custom.css}" rel="stylesheet"/>
<link th:href="@{/css/login.min.css}" rel="stylesheet">

<script>if (window.top !== window.self) {
    window.top.location = window.location;
}</script>
<body class="signin">
<div class="signinpanel">
    <div class="row">
        <div class="col-sm-6">
            <div class="signin-info">
                <div class="logopanel m-b">
                    <h1></h1>
                </div>
                <div class="m-b"></div>
                <h3>欢迎使用 <strong th:text="${session.appname}"></strong></h3>
                <ul class="m-b">
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> SpringBoot</li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Mybatis</li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Shiro</li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Thymeleaf</li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Bootstrap</li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Quartz</li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Redis</li>
                </ul>
            </div>
        </div>
        <div class="col-sm-6">
            <form id="loginForm">
                <div class="form-group">
                    <input type="text" name="username" class="form-control uname" placeholder="用户名" required="">
                </div>
                <div class="form-group">
                    <input type="password" name="password" class="form-control pword" placeholder="密码" required="">
                </div>
                <div th:if="${session.kaptcha == true}" class="form-group" style="float: left;">
                    <div class="col-sm-8" style="padding-left: 0px; padding-right: 0px;">
                        <input class="form-control code" type="text" name="kaptcha" placeholder="验证码"
                               required="">
                    </div>
                    <div class="col-sm-4" style="padding-left: 0px; padding-right: 0px;">
                        <img src="kaptcha" id="kaptcha" width="99%" height="34px"/>
                    </div>
                </div>
                <div class="checkbox-custom">
                    <input type="checkbox" id="remember" name="remember"> <label for="remember">记住我</label>
                </div>
                <button class="btn btn-success btn-block" id="btnSubmit" type="button" data-loading="正在验证登录，请稍后...">登录
                </button>
            </form>
        </div>
    </div>
    <div class="signup-footer">
        <div class="pull-left">
            &copy; 2019 All Rights Reserved.<br>
        </div>
    </div>
</div>
</body>
<div th:include="common_include :: commonFoot"/>
<script>
    $(function () {
        $("#kaptcha").on('click', function () {
            $("#kaptcha").attr('src', 'kaptcha?' + Math.floor(Math.random() * 100)).fadeIn();
        });
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#loginForm").validate({
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: icon + "请输入您的用户名",
                },
                password: {
                    required: icon + "请输入您的密码",
                },
                kaptcha: {
                    required: icon + "请输入验证码",
                }
            }
        })
        $("#btnSubmit").on('click', function () {
            if ($('#loginForm').valid()) {
                $.ajax({
                    type: "post",
                    url: "login",
                    data: $('#loginForm').serialize(),
                    success: function (r) {
                        if (r.code == 200) {
                            location.href = "/";
                        } else {
                            $('#kaptcha').click();
                            $(".code").val("");
                            $.modal.msgError(r.message);
                        }
                    }
                });
            }
        });
    });
</script>
</html>
